/**
 * @license
 * Copyright 2018 Google Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

{namespace googlecodelabs.CodelabSurvey.Templates}

/**
 * Renders questions with mdc radio groups for a codelabs survey.
 */
{template .survey}
  {@param surveyName: string }
  {@param surveyQuestions: list<[question:string, options:list<[radioId:string, radioTitle:string]>]>}
  <div class="survey-questions" survey-name={$surveyName}>
  {for $surveyQuestion in $surveyQuestions}
    <div class="survey-question-wrapper">
      <h4>{$surveyQuestion.question}</h4>
      {if length($surveyQuestion.options)}
      <div class="survey-question-options">
        {for $option in $surveyQuestion.options}
        <label class="survey-option-wrapper"
            id="{$option.radioId}-label"
            for="{$option.radioId}">
          <span class="option-text">
            {$option.radioTitle}
          </span>
          <input type="radio"
              id="{$option.radioId}"
              name="{$surveyQuestion.question}">
          <span class="custom-radio-button"></span>
        </label>
        {/for}
      </div>
      {/if}
    </div>
  {/for}
  </div>
{/template}
